<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <div>{{fullName}}</div>
</div>

<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: 'Foo',
            lastname: 'Bar',
            fullName: 'Foo Bar'
        },
        //侦听的写法
        // watch: {
        //     firstname: function (val){
        //         this.fullName = val + ' ' + this.lastname
        //     },
        //     lastname: function (val){
        //         this.fullName = this.firstname + ' ' + this.lastname
        //     }
        // },
        //计算属性的写法
        computed: {
            fullName: function (){
                return this.firstname + ' ' + this.lastname
            }
        }
    })
</script>
</body>
</html>